<template>
  <div class="page-box">
    <div class="page-search">
      <div>
        <label>入库编号</label>
        <el-input v-model="searchForm.Number" style="width: 160px;" placeholder="请输入入库编号"></el-input>
      </div>

      <div>
        <label>供应商</label>
        <el-select v-model="searchForm.VendorId" style="width: 160px;" placeholder="请选择供应商" @change="VendorChange" allow-create filterable>
          <el-option v-for="Vendor in VendorList" :key="Vendor.Id" :label="Vendor.VendorName" :value="Vendor.Id"></el-option>
        </el-select>
      </div>

       <div>
        <label>入库仓</label>
        <el-select v-model="searchForm.WarehouseId" style="width: 160px;" placeholder="请选择入库仓" @change="WarehouseChange" allow-create filterable>
          <el-option v-for="Warehouse in WarehouseList" :key="Warehouse.Id" :label="Warehouse.WarehouseName" :value="Warehouse.Id"></el-option>
        </el-select>
      </div>

      <div>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>

    <div class="page-section">
      <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">

        <el-table-column prop="Number" label="入库编号" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="VendorName" label="供应商" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="WarehouseName" label="入货仓" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="PaymentAccount" label="付款账户" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="PaymentCategory" label="付款方式" :show-overflow-tooltip="true"></el-table-column>

        <el-table-column prop="Status" label="入库状态" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.Status == '1'">已入库</el-tag>
            <el-tag type="warning" v-else>待入库</el-tag>
          </template>
        </el-table-column>
        <el-table-column  prop="PaymentTime" label="付款日期" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="DeliveryDate" label="入库日期" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
        
        <el-table-column   label="操作" :show-overflow-tooltip="true" width="160">
          <template slot-scope="scope">
            <el-button type="text" @click="choose(scope.row)">选择</el-button>
            <el-button type="text" @click="details(scope.row)">明细</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!--分页-->
      <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />
    </div>
    
  </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue';
export default {
  props:{
    BomList: {
      type: Array,
      required: true
    }
  },
  components:{
    Pagination,
  },
  mounted() {
    this.dataBind();
    this.GetOrderPoReturnSelectData();

  },
  data(){
    return{
      VendorList:[],
      WarehouseList:[],

      tableData:[],

      pageDomain:{
        PageIndex:1,
        PageSize:10,
        TotalCount:0
      },
      //搜索字段
      searchForm:{
        Number:'',
        VendorId:'',
        WarehouseId:'',
        Status:'',
      },

      isLoading:false,
      
    }
  },
  created(){
  },
  methods:{
    VendorChange(model){
      this.model.VendorId = model.Id;
      this.model.VendorName = model.VendorName;
      console.log(model);
    },
    WarehouseChange(model){
      this.model.WarehouseId = model.Id;
      this.model.WarehouseName = model.WarehouseName;
      console.log(model);
    },
    //搜索
    search(){
      this.pageDomain.PageIndex=1;
      this.dataBind();
    },
    details(){
    },

    //重置
    reset(){
      this.searchForm.Number = '';
      this.searchForm.VendorId = '';
      this.searchForm.WarehouseId = '';
      this.searchForm.Status = '';
      this.dataBind();
    },
    choose(model){
      this.$emit('callback',model);
    },
    dataBind(){
            this.isLoading=true;
            this.$http.get('/api/OrderPoReturn/GetWhPoInboundsj',{
              params:{
                    PageIndex:this.pageDomain.PageIndex,
                    PageSize:this.pageDomain.PageSize,

                    Number:this.searchForm.Number,
                    VendorId:this.searchForm.VendorId,
                    WarehouseId:this.searchForm.WarehouseId,
                    Status:1
               }
            })
            .then(res=>{
                this.tableData=res.Data;
                this.pageDomain.TotalCount = res.Count;
                this.isLoading=false; 
            })
    },

    GetOrderPoReturnSelectData(){
      //供应商
      this.$http.get('./api/Integrated/GetProductSelectData')
      .then(res => {
        console.log(res.Data);
        this.VendorList = res.Data.VendorList;
      })
      //仓库
      this.$http.get('./api/Integrated/GetOrderReturnSelectData')
      .then(res => {
        console.log(res.Data);
        this.WarehouseList = res.Data.WarehouseList;
      })
    },

    //分页方法
    handleSizeChange(val){
      this.pageDomain.PageIndex = 1;
      this.pageDomain.PageSize = val;
      this.dataBind();
    },
    handleCurrentChange(val){
      this.pageDomain.PageIndex = val;
      this.dataBind();
    },
  }
}
</script>

<style>

 </style>